<template>
  <!-- 表格下钻弹框 -->
  <div class="echart-dialog">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <!-- {{ echartData.setups }} -->
    <!-- {{ colConfigList }} -->
    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header-gray"
        border
        height="calc(100vh - 1.5rem)"
      >
        <template v-for="(item, index) in colConfigList" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" />
        </template>
      </el-table>
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleCancelCallBack">{{
        cancelText
      }}</el-button>
      <!-- <el-button type="primary" @click="submitCallback">{{
        submitText
      }}</el-button> -->
    </div>
  </div>
</template>

<script setup name="Confirm">
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import { getComponentShowListApi } from '@/views/design-center/api/screen';

import { ref, computed } from 'vue';

const prop = defineProps({
  searchData: {
    type: String, //穿透查询参数
    default: ''
  },

  title: {
    type: String,
    default: '提示'
  },

  submitText: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  handleCancelCallBack: {
    type: Function
  },
  submitCallback: {
    type: Function
  },
  echartData: {
    type: Object,
    default: () => {}
  }
});
const tableData = ref([]);

const colConfigList = computed(() => {
  return prop.echartData?.setups.penetrationSettings?.checkList?.map((item) => {
    return {
      prop: item.value,
      label: item.label
    };
  });
});

const getComponentDrillDownList = async () => {
  try {
    let res = await getComponentShowListApi({
      dataSetId: prop.echartData?.setups?.associatedDatasets?.id, //数据集id
      gangedCondition: prop.searchData //穿透/联动查询条件
    });
    tableData.value = res.data;
  } catch (error) {}
};
// getComponentDrillDownList();
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
.table-header-gray {
  // @include tableHeader;
}
</style>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
@import '@/assets/styles/index.scss';
@keyframes slideInDown {
  from {
    // -webkit-transform: translate(0%, 35%);
    transform: translateX(0%, 0%);
    visibility: visible;
  }

  to {
    // -webkit-transform: translate(0%, 35%);
    transform: translateX(0%, 35%);
  }
}
.echart-dialog {
  width: 6.4rem;
  height: 100%;
  background-color: white;
  border: 0.01rem solid rgba(169, 169, 169, 0.92);

  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;

  // animation: slideInDown 3s;

  .title {
    font-size: 0.18rem;
    height: 0.45rem;
    padding: 0.16rem 0.3rem;
    width: 100%;
    font-weight: 700;
  }
  .content {
    padding: 15px 20px 15px 20px;
    // height: 4.5rem;
    // height: 6.5rem;

    display: flex;
    justify-content: center;
    font-size: 16px;
  }
  .footer {
    display: flex;
    justify-content: end;
    padding: 0.15rem 0.2rem 0.15rem 0.2rem;
    .btn {
      width: 0.68rem;
      margin-left: 0.2rem;
      height: 0.5rem;
      cursor: pointer;
    }
  }
}
</style>
